<!DOCTYPE html>
<html>

<head>
    <title>关于</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- js -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/vue.js"></script>
    <!-- //js -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="app">
        <!-- header -->
    <div class="header">
        <div class="container">
            <div class="header-nav">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
                    </div>
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="hvr-bounce-to-bottom "><a href="index.html">主页</a></li>
                            <li class="hvr-bounce-to-bottom active"><a href="about.html">关于</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="menu.html">菜谱</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="blog.html">论坛交流</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="contact.html">发布</a></li>
                            <li class="hvr-bounce-to-bottom "><a href="login.html" v-if="username==null">登录</a></li>
                            <li class="hvr-bounce-to-bottom"><a @click="logout"  >{{username}}</a></li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </div>
    <!-- //header -->
    <!-- about -->
   <!-- 个人中心 -->
<!-- 个人中心 -->
<!-- 个人中心 -->
<div class="about personal-center">
    <div class="container" v-if="id==null">
        <h3>欢迎来到美食网站</h3>
        <p class="eum">或者被智者选择的那些东西的痛苦所束缚的人</p>
        <div class="fig-text">
            <img src="images/1.jpg" alt=" " class="img-responsive" />
            <p>然而，在某些时候，经常会发生这样的情况，要么快乐要么被必要的办公室拒绝，要么被事物的必需品拒绝，而烦恼也不能被接受。所以这些事物的选择由智者保留在这里，以便他可以通过拒绝其他快乐来获得或继续其他快乐。</p>
        </div>
    </div>
    <div class="container" v-else>
        <div class="row justify-content-between align-items-center">
            <!-- 左侧个人信息区 -->
            <div class="col-lg-4 col-md-5 profile-sidebar">
                <div class="user-profile bg-light p-4 rounded shadow">
                    <img :src="userInfo.imgUrl" alt="个人头像" class="rounded-circle img-fluid w-100 mb-3" style="height: 100px; border-radius: 100px;margin-left: 30%;">
                    <h2 class="mb-3 " style="text-align: center;">{{ userInfo.username }}</h2>
                    <!-- 可以在此处扩展更多个人信息 -->
                </div>
            </div>

            <!-- 右侧博客列表区 -->
            <div class="col-lg-7 col-md-7 blog-list-container">
                <h3 class="text-center mb-4">我的博客</h3>
                <div class="list-group">
                    <div class="list-group-item border rounded-0" v-for="(blog, index) in blogs" :key="index">
                        <h5 class="mb-1">{{ blog.title }}</h5>
                        <p class="mb-1">{{ blog.desc }}</p>
                        <small class="text-muted">发布于：{{ blog.created_time }}</small>
                        <a :href="'/pages/singles/single1.html?id=' + blog.id" class="float-end small text-primary">查看详情</a>
                        <a @click="deleteBlog(blog.id)" class="float-end small text-primary">删除</a>
                        <a @click="toUpdate(blog.id)" class="float-end small text-primary">修改</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
   
  
    <!-- //about -->
    <!--- footer --->
    <div class="footer">
        <div class="container">
            <div class="footer-grids">
                <div class="col-md-3 footer-grid">
                    <h3>关于我们</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>用户协议</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>隐私政策</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>客户端下载</h3>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <div class="clear"> </div>
    <div class="copy-right">
        <p>Copyright &copy; 2022.美食网站版权所有</p>
    </div>
    <!--- //footer --->
    <!-- for bootstrap working -->
    <script src="js/bootstrap.js">
    </script>
    <!-- //for bootstrap working -->
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            hello:"helloWorld",
            id:"",
            userInfo:{
                id:"",
                username:"taritari",
                imgUrl:"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0225%2F7cf1de7dj00s9eoc900gkd000r900jhp.jpg&thumbnail=660x2147483647&quality=80&type=jpg"
            },
            blogs:[
            {
                "authorId": 1,
                "created_time": "Sun, 25 Feb 2024 12:00:00 GMT",
                "desc": "今天去了一家川菜馆，尝试了各种经典菜品，特别推荐他们的麻辣香锅和麻婆豆腐，味道真的很地道！",
                "id": 1,
                "img_url": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0225%2F7cf1de7dj00s9eoc900gkd000r900jhp.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
                "theme": "美食探店",
                "title": "探店记：川菜馆一日游"
                },
                {
                "authorId": 1,
                "created_time": "Mon, 26 Feb 2024 10:00:00 GMT",
                "desc": "分享一下我家红烧肉的做法，简单易学，肉质鲜嫩，酱汁入味，快来学习一下吧！",
                "id": 2,
                "img_url": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0225%2F7cf1de7dj00s9eoc900gkd000r900jhp.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
                "theme": "家常菜制作",
                "title": "家常菜分享：红烧肉的秘诀"
                }
            ]
           
        },
        // 创建就运行
        created() {
           this.isLogin()
        },
        // 方法
        methods: {
           // 退出登录
           logout(){
                sessionStorage.clear()
                window.location.reload()
            },
            //判断是否登录
            isLogin(){
                this.username = sessionStorage.getItem("username")
                this.imgUrl = sessionStorage.getItem("img_url")
                this.id = sessionStorage.getItem("id")
                if(this.id!=null&&this.id!=""){
                    this.getData()
                }
            },
            async getData(){
                const response =  await fetch('http://127.0.0.1:5001/food/getByAuthorId?authorId='+this.id )
                const data = await response.json();
                // 给数据赋值
                this.blogs =  data.data
            },
            async deleteBlog(id){
                const response =  await fetch('http://127.0.0.1:5001/blog/deleteById?id='+id)
                const data = await response.json();
                if(data.code==200){
                    alert("删除成功")
                    this.getData()
                }
            },
            toUpdate(id){
                window.location.href = "contact.html?blogId="+id
            }
        }
    })
</script>
</html>